<script setup lang="ts">
import { ref } from 'vue'
import type { Prescription } from '@/types/prescription'
import { listPrescriptions } from '@/services/prescription'
import { onLoad } from '@dcloudio/uni-app'

const dataList = ref<Required<Prescription>[]>([])

onLoad(async () => {
  const page = await listPrescriptions()
  console.log(page)
  dataList.value = page.records
})
</script>

<template>
  <view class="container">
    <view class="data-list" v-if="dataList">
      <view v-for="(data, i) in dataList" :key="i">
        <view class="data-item">
          <!-- 商品左侧图片区域 -->
          <view class="data-item-left">
            <image :src="data.medicine.cover" class="data-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="data-item-right">
            <view class="tag">
              <uni-tag v-if="data.status===0" :inverted="true" text="待付款" type="error" />
              <uni-tag v-if="data.status===1" :inverted="true" text="待发货" type="primary" />
            </view>
            <!-- 标题 -->
            <view class="">患者：{{ data.patient.name }}</view>
            <view class="">医生：{{ data.doctor.name }}</view>
            <view class="data-name">
              <text>{{ data.medicine.medicineName }} {{ data.medicineNum }} 盒</text>
              <text> 总额：</text>
              <text style="color: red">{{data.medicineAmount}}</text>
            </view>
            <view class="data-info-box">
              <!-- 商品价格 -->
              <view class="data-price">处方时间:</view>
              <view class="data-price">{{ data.prescribeDate }}</view>
              <!-- <view @click="handleItemClick(data._id)" class="iconfont icon-tianxie"></view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.data-item {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .data-item-left {
    margin-right: 15px;

    .data-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .data-item-right {
    position: relative;
    margin-right: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .tag{
      position: absolute;
      top: 0;
      right: 0;
    }

    .data-name {
      font-size: 16px;
    }

    .data-info-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .data-price {
      font-size: 16px;
      // color: #c00000;
    }

    .icon-tianxie {
      font-size: 25px;
      // color: #c00000;
    }
  }
}
</style>
